<template>
    <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
        @closed="resetForm"
        append-to-body>
        <el-form :model="changeForm" :rules="changeRules" ref="changePasswordDialog" label-width="100px" size="small">
            <el-form-item label="当前用户ID">
                <el-input :value="currentUserId" disabled/>
            </el-form-item>
            <el-form-item label="当前用户名">
                <el-input :value="currentUsername" disabled/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="changeForm.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="changeForm.confirmPassword" placeholder="请确认密码"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog" size="small">取消</el-button>
            <el-button type="primary" @click="submitChange" size="small">确定修改</el-button>
        </div>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            dialogVisible: false,
            currentUserId: null,
            currentUsername: '',
            changeForm: {
                password: '',
                confirmPassword: ''
            },
            changeRules: {
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请确认密码', trigger: 'blur' },
                    { validator: this.validatePasswordMatch, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        openDialog(userData) {
            this.currentUserId = userData.id;
            this.currentUsername = userData.username;
            this.dialogVisible = true;
        },
        closeDialog() {
            this.dialogVisible = false;
        },
        resetForm() {
            this.$refs.changePasswordDialog?.resetFields();
            this.currentUserId = null;
            this.currentUsername = '';
        },
        validatePasswordMatch(rule, value, callback) {
            if (value !== this.changeForm.password) {
                callback(new Error('两次输入的密码不一致'));
            } else {
                callback();
            }
        },
        submitChange() {
            this.$refs.changePasswordDialog.validate((valid) => {
                if (valid) {
                    this.$confirm(`确定要修改用户 ${this.currentUsername} (ID: ${this.currentUserId}) 的密码吗？`, '确认修改密码', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const apiData = {
                            user_id: this.currentUserId,
                            password: this.changeForm.password
                        };

                        this.$http.post('/admin/User/changePassword', apiData)
                            .then(result => {
                                if (result.code === 200) {
                                    this.$message.success('密码修改成功!');
                                    this.$emit('change-success');
                                    this.closeDialog();
                                } else {
                                    this.$message.error(result.msg || '修改失败');
                                }
                            })
                            .catch(error => {
                                console.error('Change Password API error:', error);
                                this.$message.error('请求失败，请稍后重试');
                            });
                    }).catch(() => {
                        this.$message({ type: 'info', message: '已取消修改' });
                    });
                } else {
                    console.log('Change password form validation failed');
                    return false;
                }
            });
        }
    }
};
</script>
<style scoped lang="less">
.dialog-footer {
    text-align: right;
}
/deep/.el-dialog__header{
    text-align: center !important;
}
</style>
